<template>
    <el-dialog
        :append-to-body="true"
        title="参数设置"
        :visible="visible"
        width="860px"
        center
        v-on="$listeners"
        destroy-on-close
    >
        <el-form class="f params-form" v-loading="loading" :model="paramsForm" size="mini" label-width="150px" label-position="right">
            <template v-if="interfaceVer==='v1'">
                <el-form-item v-if="paramsForm.fillType" class="form-item " label="流量计参数校准:">
                    <el-input class="form-comp-item"
                              v-model="paramsForm.macPrecision"
                              placeholder="请输入"
                              type="number"
                    ></el-input>
                </el-form-item>
                <el-form-item v-if="paramsForm.hasAdvert" class="form-item " label="灯光时间:">
                    <el-time-picker
                        style="width: 100px;"
                        v-model="paramsForm.openTime"
                        format="HH:mm"
                        value-format="HH:mm"
                        placeholder="开始时间">
                    </el-time-picker>
                    <span> 至 </span>
                    <el-time-picker
                        style="width: 100px;"
                        v-model="paramsForm.closeTime"
                        format="HH:mm"
                        value-format="HH:mm"
                        placeholder="结束时间">
                    </el-time-picker>
                </el-form-item>
                <el-form-item class="form-item " label="补液流量计参数校准:"
                              v-if="paramsForm.hasStorage"
                >
                    <el-input class="form-comp-item"
                              v-model="paramsForm.storagePrecision"
                              placeholder="请输入"
                              type="number"
                    >
                        <span slot="suffix">(mv)</span>
                    </el-input>
                </el-form-item>
                <el-form-item class="form-item " label="液位传感器参数校准:"
                              v-if="paramsForm.hasSensor"
                >
                    <el-input class="form-comp-item"
                              v-model="paramsForm.zeroVofLep"
                              placeholder="请输入"
                              type="number"
                    >
                        <span slot="suffix">(mv)</span>
                    </el-input>
                </el-form-item>
                <el-form-item class="form-item " label="液位高度变化值:"
                              v-if="paramsForm.hasSensor"
                >
                    <el-input class="form-comp-item"
                              v-model="paramsForm.lepchange"
                              placeholder="请输入"
                              type="number"
                    >
                        <span slot="suffix">(cm)</span>
                    </el-input>
                </el-form-item>
                <el-form-item class="form-item " label="桶最大高度:">
                    <el-input class="form-comp-item"
                              v-model="paramsForm.maxHeight"
                              placeholder="请输入"
                              @keydown.native="inputIntLimit"
                              type="number"
                    >
                        <span slot="suffix">(cm)</span>
                    </el-input>
                </el-form-item>
                <el-form-item class="form-item " label="桶最大容量:">
                    <el-input class="form-comp-item"
                              v-model="paramsForm.totalWeight"
                              placeholder="请输入"
                              @keydown.native="inputIntLimit"
                              type="number"
                    >
                        <span slot="suffix">(kg)</span>
                    </el-input>
                </el-form-item>
                <el-form-item class="form-item " label="单价:">
                    <el-input class="form-comp-item" v-model="paramsForm.ureaPrice" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item class="form-item " label="计量单位:">
                    <el-radio v-model="paramsForm.units" :label="0">L</el-radio>
                    <el-radio v-model="paramsForm.units" :label="1">kg</el-radio>
                </el-form-item>
                <el-form-item class="form-item " label="尿素品牌:">
                    <el-input class="form-comp-item" v-model="paramsForm.ureaType" placeholder="请输入"></el-input>
                </el-form-item>
<!--                <el-form-item class="form-item " label="二维码:">-->
<!--                    <el-image-->
<!--                        style="width: 50px; height: 50px"-->
<!--                        :src="qrCode"-->
<!--                        fit="fill"-->
<!--                        @click="previewImg(qrCode)"-->
<!--                    ></el-image>-->
<!--                    <el-button style="margin-left: 10px;margin-bottom: 10px;font-size: 16px" type="text" @click="genQrcode">生成</el-button>-->
<!--                </el-form-item>-->
                <el-form-item class="form-item " label="泵压力值:">
                    <el-input class="form-comp-item"
                              v-model="paramsForm.pumpWorkKPa"
                              placeholder="请输入"
                              type="number"
                    >
                        <span slot="suffix">(kpa)</span>
                    </el-input>
                </el-form-item>
                <el-form-item class="form-item " label="设备待机界面:">
                    <el-radio v-model="paramsForm.backchoice" :label="0">普通式</el-radio>
                    <el-radio v-model="paramsForm.backchoice" :label="1">加油站式</el-radio>
                </el-form-item>
            </template>
            <template v-if="interfaceVer==='v2'">
                <el-form-item  v-if="paramsForm.fillType" class="form-item " label="流量计参数校准:">
                    <el-input class="form-comp-item"
                              v-model="paramsForm.macPrecision"
                              placeholder="请输入"
                              type="number"
                    ></el-input>
                </el-form-item>
                <el-form-item v-if="paramsForm.hasAdvert" class="form-item " label="灯光时间:">
                    <el-time-picker
                        style="width: 100px;"
                        v-model="paramsForm.openTime"
                        format="HH:MM"
                        value-format="HH:mm"
                        placeholder="开始时间">
                    </el-time-picker>
                    <span> 至 </span>
                    <el-time-picker
                        style="width: 100px;"
                        v-model="paramsForm.closeTime"
                        format="HH:MM"
                        value-format="HH:mm"
                        placeholder="结束时间">
                    </el-time-picker>
                </el-form-item>
                <el-form-item v-if="paramsForm.hasSensor" class="form-item " label="液位传感器参数校准:">
                    <el-input class="form-comp-item"
                              v-model="paramsForm.zeroVofLep"
                              placeholder="请输入"
                              type="number"
                    >
                        <span slot="suffix">(mv)</span>
                    </el-input>
                </el-form-item>
                <el-form-item v-if="paramsForm.hasSensor" class="form-item " label="液位高度变化值:">
                    <el-input class="form-comp-item"
                              v-model="paramsForm.lepchange"
                              placeholder="请输入"
                              type="number"
                    >
                        <span slot="suffix">(cm)</span>
                    </el-input>
                </el-form-item>
                <el-form-item class="form-item " label="桶最大高度:">
                    <el-input class="form-comp-item"
                              v-model="paramsForm.maxHeight"
                              placeholder="请输入"
                              @keydown.native="inputIntLimit"
                              type="number"
                    >
                        <span slot="suffix">(cm)</span>
                    </el-input>
                </el-form-item>
                <el-form-item class="form-item " label="桶最大容量:">
                    <el-input class="form-comp-item"
                              v-model="paramsForm.totalWeight"
                              placeholder="请输入"
                              @keydown.native="inputIntLimit"
                              type="number"
                    >
                        <span slot="suffix">(kg)</span>
                    </el-input>
                </el-form-item>
                <el-form-item class="form-item " label="单价:">
                    <el-input class="form-comp-item" v-model="paramsForm.ureaPrice" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item class="form-item " label="计量单位:">
                    <el-radio v-model="paramsForm.units" :label="0">L</el-radio>
                    <el-radio v-model="paramsForm.units" :label="1">kg</el-radio>
                </el-form-item>
                <el-form-item class="form-item " label="尿素品牌:">
                    <el-input class="form-comp-item" v-model="paramsForm.ureaType" placeholder="请输入"></el-input>
                </el-form-item>
<!--                <el-form-item class="form-item" label="运行模式:">-->
<!--                    <el-radio class="run-mode" v-model="paramsForm.runType" label="1">扫码+IC卡</el-radio>-->
<!--                    <el-radio class="run-mode" v-model="paramsForm.runType" label="2">反扫码+IC卡</el-radio>-->
<!--                    <el-radio class="run-mode" v-model="paramsForm.runType" label="3">仅IC卡</el-radio>-->
<!--                    <el-radio class="run-mode" v-model="paramsForm.runType" label="4">免支付</el-radio>-->
<!--                </el-form-item>-->

<!--                <el-form-item class="form-item " label="二维码:">-->
<!--                    <el-image-->
<!--                        style="width: 50px; height: 50px"-->
<!--                        :src="qrCode"-->
<!--                        fit="fill"-->
<!--                        @click="previewImg(qrCode)"-->
<!--                    ></el-image>-->
<!--                    <el-button style="margin-left: 10px;margin-bottom: 10px;font-size: 16px" type="text" @click="genQrcode">生成</el-button>-->
<!--                </el-form-item>-->
                <el-form-item class="form-item " label="设备待机界面:"
                              v-if="!['MacType3', 'MacType4'].includes(paramsForm.macType)"
                >
                    <el-radio v-model="paramsForm.backchoice" :label="0">普通式</el-radio>
                    <el-radio v-model="paramsForm.backchoice" :label="1">加油站式</el-radio>
                </el-form-item>
            </template>
            <template v-if="interfaceVer==='v3'">
                <el-form-item v-if="paramsForm.fillType" class="form-item " label="流量计参数校准:" prop="macPrecision">
                    <el-input class="form-comp-item"
                              v-model="paramsForm.macPrecision"
                              placeholder="请输入"
                              type="number"
                    ></el-input>
                </el-form-item>
                <el-form-item v-if="paramsForm.hasAdvert" class="form-item " label="灯光时间:" prop="openTime">
                    <el-time-picker
                        style="width: 100px;"
                        v-model="paramsForm.openTime"
                        format="HH:mm"
                        value-format="HH:mm"
                        placeholder="开始时间">
                    </el-time-picker>
                    <span> 至 </span>
                    <el-time-picker
                        style="width: 100px;"
                        v-model="paramsForm.closeTime"
                        format="HH:mm"
                        value-format="HH:mm"
                        placeholder="结束时间">
                    </el-time-picker>
                </el-form-item>
                <el-form-item v-if="paramsForm.deviceType!=='DeviceType3'" class="form-item " label="温控启停设置:" prop="startTemperature">
                    <div class="form-comp-item">
                        <el-input style="width: 90px;" type="number" placeholder="启动温度" v-model="paramsForm.startTemperature"></el-input>
                        <span style="color: #999999"> ℃</span>
                        至
                        <el-input style="width: 90px;" type="number" placeholder="停止温度" v-model="paramsForm.endTemperature"></el-input>
                        <span style="color: #999999"> ℃</span>
                    </div>
                </el-form-item>
                <el-form-item v-if="paramsForm.hasStorage" class="form-item " label="补液流量计参数校准:">
                    <el-input class="form-comp-item"
                              v-model="paramsForm.storagePrecision"
                              placeholder="请输入"
                              type="number"
                    ></el-input>
                </el-form-item>
                <el-form-item v-if="paramsForm.hasSensor" class="form-item " label="液位传感器参数校准:">
                    <el-input class="form-comp-item"
                              v-model="paramsForm.zeroVofLep"
                              placeholder="请输入"
                              type="number"
                    >
                        <span slot="suffix">(mv)</span>
                    </el-input>
                </el-form-item>
                <el-form-item v-if="paramsForm.hasSensor" class="form-item " label="液位高度变化值:">
                    <el-input class="form-comp-item"
                              v-model="paramsForm.lepchange"
                              placeholder="请输入"
                              type="number"
                    >
                        <span slot="suffix">(cm)</span>
                    </el-input>
                </el-form-item>
                <el-form-item class="form-item " label="桶最大高度:">
                    <el-input class="form-comp-item"
                              v-model="paramsForm.maxHeight"
                              placeholder="请输入"
                              @keydown.native="inputIntLimit"
                              type="number"
                    >
                        <span slot="suffix">(cm)</span>
                    </el-input>
                </el-form-item>
                <el-form-item class="form-item " label="桶最大容量:">
                    <el-input class="form-comp-item" v-model="paramsForm.totalWeight" placeholder="请输入" @keydown.native="inputIntLimit">
                        <span slot="suffix">(kg)</span>
                    </el-input>
                </el-form-item>
                <el-form-item class="form-item " label="单价:">
                    <el-input class="form-comp-item" v-model="paramsForm.ureaPrice" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item class="form-item " label="计量单位:">
                    <el-radio v-model="paramsForm.units" :label="0">L</el-radio>
                    <el-radio v-model="paramsForm.units" :label="1">kg</el-radio>
                </el-form-item>
                <el-form-item class="form-item " label="尿素品牌:">
                    <el-input class="form-comp-item" v-model="paramsForm.ureaType" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item class="form-item " label="浓度:">
                    <el-input class="form-comp-item"
                              v-model="paramsForm.concentrate"
                              placeholder="请输入"
                              type="number"
                    >
                        <span slot="suffix">(%)</span>
                    </el-input>
                </el-form-item>
                <el-form-item class="form-item " label="隐藏量:">
                    <el-input class="form-comp-item"
                              v-model="paramsForm.hiddenValue"
                              placeholder="请输入"
                              type="number"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item class="form-item " label="设备待机界面:"
                              v-if="!['MacType3', 'MacType4'].includes(paramsForm.macType)"
                >
                    <el-radio v-model="paramsForm.backchoice" :label="0">普通式</el-radio>
                    <el-radio v-model="paramsForm.backchoice" :label="1">加油站式</el-radio>
                </el-form-item>
            </template>
        </el-form>
        <div slot="footer">
            <el-button @click="cancel">取 消</el-button>
            <span style="display: inline-block;width: 20px;"></span>
            <el-button :loading="btnLoading" type="primary" @click="confirm">确 定</el-button>
        </div>
    </el-dialog>

</template>

<script>
import {inputIntLimit, interfaceVersion} from "@/utils";
import demoCode from '@/assets/image/demo-code.png'
import {previewImg} from "@/utils/previewImg";
import {genQrcode} from "@/api/common";
import {Loading, Message} from "element-ui";
import {getDeviceDetail, setParams} from "@/api/device";

export default {
    name: "paramsSet",
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        id: {
            type: [String, Number],
            require: true
        }
    },
    data() {
        return {
            previewImg,
            inputIntLimit,
            demoCode,
            paramsForm: {
                macPrecision:  0.00495, // 加注流量精度
                storagePrecision: null, // 蓄注流量精度
                ureaPrice: 2.5, // 单价
                openTime: '18:01', // 开灯时间
                closeTime: '05:01', // 关灯时间
                ureaType: null, // 尿素品牌
                units: 1, // 计量单位 （0-升  1-KG）
                startTemperature: null, // 启动温度
                endTemperature: null, // 停止温度
                maxHeight: null, // 桶最大高度
                totalWeight: null, // 桶最大容量
                zeroVofLep: 480, // 液位传感器参数校准
                lepchange: 1, // 液位高度变化值
                runType: null, // 运行模式
                concentrate: null, // 浓度
                backchoice: 0, // 设备待机界面 设备待机界面(0-普通式，1-加油站式）
                pumpWorkKPa: '', // 泵停压力
                hiddenValue: null, // 隐藏量
            },
            loading: false,
            btnLoading: false,
            interfaceVer: null,
            qrCode: demoCode,
        }
    },
    watch: {
        'paramsForm.macType': {
            handler: function (val) {
                if(!val) return;
                this.interfaceVer = interfaceVersion(val)
            },
            immediate: true
        }
    },
    created() {
        if (this.id) {
            this.getDeviceDetail()
        }
    },
    methods: {
        setDefaultVal(val) {
            if(!this.paramsForm.macPrecision) {
                if(val==='v3') {
                    this.paramsForm = {
                        ...this.paramsForm,
                        ...{
                            // runType: 3, // 运行模式
                        }
                    }
                }
            }
        },
        async genQrcode() {
            let loadingInstance = Loading.service({text:'生成中...'});
            const res = await genQrcode(this.id)
            let url = URL.createObjectURL(new Blob([res]))
            this.qrCode = url
            this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
                loadingInstance.close();
                Message.success('二维码生成成功！')
            });
        },
        confirm() {
            this.btnLoading = true
            setParams(this.paramsForm).then((res)=>{
                Message.success('参数设置成功！')
                this.$emit('fresh')
                this.cancel()
            }).finally(() => {
                this.loading = false
                this.btnLoading = false
            })
        },
        cancel() {
            this.$emit('update:visible',false)
            this.$emit('fresh')
        },
        getDeviceDetail() {
            this.loading = true
            getDeviceDetail(this.id).then((res)=>{
                let oldForm = {...this.paramsForm}
                this.paramsForm = res.data
                if(!res.data.macPrecision) {
                    this.paramsForm = { ...this.paramsForm, ...oldForm}
                }
                console.log(this.paramsForm)
            }).finally(() => {
                this.loading = false
            })
        },
    }
}
</script>

<style scoped>
.params-form {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    height: 400px;
}
.form-item {
    width: 50%;


}
::v-deep .el-form-item  .el-form-item__content {
    width: 100%;
}
.form-comp-item {
    width: 240px;
}
.run-mode {
    margin-top: 10px;
    display: block;
}
</style>
